﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.TabsModel
@{
    ViewData["Title"] = "Tabs";
}

@section styles {
    <abp-style-bundle>
        <abp-style src="/css/demo.css" />
    </abp-style-bundle>
}

@section scripts {
    <abp-script-bundle>
        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
            <abp-script src="/Pages/Components/highlightCode.js" />*@
    </abp-script-bundle>
}

<link rel="stylesheet"
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


<h2>Tabs</h2>

<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/navs/#tabs" target="_blank"> Bootstrap tab</a>.</p>

<h4>Example</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-tabs>
            <abp-tab title="Home">
                Content_Home
            </abp-tab>
            <abp-tab-link title="Link" href="#" />
            <abp-tab title="profile">
                Content_Profile
            </abp-tab>
            <abp-tab-dropdown title="Contact" name="ContactDropdown">
                <abp-tab title="Contact 1" parent-dropdown-name="ContactDropdown">
                    Content_1_Content
                </abp-tab>
                <abp-tab title="Contact 2" parent-dropdown-name="ContactDropdown">
                    Content_2_Content
                </abp-tab>
            </abp-tab-dropdown>
        </abp-tabs>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-tabs&gt;
    &lt;abp-tab title=&quot;Home&quot;&gt;
             Content_Home
    &lt;/abp-tab&gt;
    &lt;abp-tab-link title=&quot;Link&quot; href=&quot;#&quot; /&gt;
    &lt;abp-tab title=&quot;profile&quot;&gt;
            Content_Profile
    &lt;/abp-tab&gt;
    &lt;abp-tab-dropdown title=&quot;Contact&quot; name=&quot;ContactDropdown&quot;&gt;
        &lt;abp-tab title=&quot;Contact 1&quot; parent-dropdown-name=&quot;ContactDropdown&quot;&gt;
            Content_1_Content
        &lt;/abp-tab&gt;
        &lt;abp-tab title=&quot;Contact 2&quot; parent-dropdown-name=&quot;ContactDropdown&quot;&gt;
            Content_2_Content
        &lt;/abp-tab&gt;
    &lt;/abp-tab-dropdown&gt;
&lt;/abp-tabs&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div&gt;
    &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;48c14227782f4edab7f153b413ac1429&quot; role=&quot;tablist&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;48c14227782f4edab7f153b413ac1429_0-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_0&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;LinkId-tab&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;48c14227782f4edab7f153b413ac1429_2-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_2&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_2&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item dropdown&quot;&gt;
            &lt;a class=&quot;nav-link dropdown-toggle&quot; id=&quot;ContactDropdown-tab&quot; data-toggle=&quot;dropdown&quot; href=&quot;#ContactDropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;div class=&quot;dropdown-menu&quot;&gt;
                &lt;a class=&quot;dropdown-item&quot; id=&quot;48c14227782f4edab7f153b413ac1429_3-tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_3&quot; data-toggle=&quot;tab&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_3&quot; aria-selected=&quot;false&quot;&gt;Contact 1&lt;/a&gt;
                &lt;a class=&quot;dropdown-item&quot; id=&quot;48c14227782f4edab7f153b413ac1429_4-tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_4&quot; data-toggle=&quot;tab&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_4&quot; aria-selected=&quot;false&quot;&gt;Contact 2&lt;/a&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class=&quot;tab-content&quot; id=&quot;48c14227782f4edab7f153b413ac1429Content&quot;&gt;
        &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;48c14227782f4edab7f153b413ac1429_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_0-tab&quot;&gt;
              Content_Home
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_2-tab&quot;&gt;
              Content_Profile
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_3&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_3-tab&quot;&gt;
              Content_1_Content
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_4&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_4-tab&quot;&gt;
              Content_2_Content
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Tab attributes</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-tabs name="TabId">
            <abp-tab name="nav-home" title="Home">
                Content_Home
            </abp-tab>
            <abp-tab name="nav-profile" active="true" title="profile">
                Content_Profile
            </abp-tab>
            <abp-tab name="nav-contact" title="Contact">
                Content_Contact
            </abp-tab>
        </abp-tabs>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-tabs name=&quot;TabId&quot;&gt;
    &lt;abp-tab name=&quot;nav-home&quot; title=&quot;Home&quot;&gt;
        Content_Home
    &lt;/abp-tab&gt;   
    &lt;abp-tab name=&quot;nav-profile&quot; active=&quot;true&quot; title=&quot;profile&quot;&gt;
        Content_Profile
    &lt;/abp-tab&gt;
    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
        Content_Contact
    &lt;/abp-tab&gt;
&lt;/abp-tabs&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div&gt;
    &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;TabId&quot; role=&quot;tablist&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;nav-home-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-home&quot; role=&quot;tab&quot; aria-controls=&quot;nav-home&quot; aria-selected=&quot;false&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;nav-profile-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-profile&quot; role=&quot;tab&quot; aria-controls=&quot;nav-profile&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active show&quot; id=&quot;nav-contact-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-contact&quot; role=&quot;tab&quot; aria-controls=&quot;nav-contact&quot; aria-selected=&quot;true&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class=&quot;tab-content&quot; id=&quot;TabIdContent&quot;&gt;
        &lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-home-tab&quot;&gt;
             Content_Home
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-profile-tab&quot;&gt;
             Content_Profile
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane fade active show&quot; id=&quot;nav-contact&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-contact-tab&quot;&gt;
             Content_Contact
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
    <div class="attribute-area">
        <ul>
            <li>
                <b>name</b>: Sets "id" attribute of generated elements. Default value is a Guid. Not needed unless tabs are changed or modified with Jquery.
            </li>
            <li>
                <b>active</b>: Sets the active tab.
            </li>
        </ul>
    </div>
</div>

<h4>Pill Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-tabs tab-style="Pill">
            <abp-tab title="Home">
                Content_Home
            </abp-tab>
            <abp-tab title="profile">
                Content_Profile
            </abp-tab>
            <abp-tab title="Contact">
                Content_Contact
            </abp-tab>
        </abp-tabs>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-tabs tab-style=&quot;Pill&quot;&gt;
    &lt;abp-tab title=&quot;Home&quot;&gt;
         Content_Home
    &lt;/abp-tab&gt;
    &lt;abp-tab title=&quot;profile&quot;&gt;
         Content_Profile
    &lt;/abp-tab&gt;
    &lt;abp-tab title=&quot;Contact&quot;&gt;
         Content_Contact
    &lt;/abp-tab&gt;
&lt;/abp-tabs&gt;

</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div&gt;
    &lt;ul class=&quot;nav nav-pills&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946&quot; role=&quot;tablist&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_0-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_0&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_1-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_1&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_1&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_2-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_2&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_2&quot; aria-selected=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class=&quot;tab-content&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946Content&quot;&gt;
        &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_0-tab&quot;&gt;
               Content_Home
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane fade&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_1&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_1-tab&quot;&gt;
               Content_Profile
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane fade&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_2-tab&quot;&gt;
               Content_Contact
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Vertical Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-tabs tab-style="PillVertical" vertical-header-size="_2">
            <abp-tab title="Home">
                Content_Home
            </abp-tab>
            <abp-tab title="profile">
                Content_Profile
            </abp-tab>
            <abp-tab title="Contact">
                Content_Contact
            </abp-tab>
        </abp-tabs>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-tabs tab-style=&quot;PillVertical&quot; vertical-header-size=&quot;_2&quot; &gt;
    &lt;abp-tab active=&quot;true&quot; title=&quot;Home&quot;&gt;
        Content_Home
    &lt;/abp-tab&gt;   
    &lt;abp-tab title=&quot;profile&quot;&gt;
        Content_Profile
    &lt;/abp-tab&gt;
    &lt;abp-tab title=&quot;Contact&quot;&gt;
        Content_Contact
    &lt;/abp-tab&gt;
&lt;/abp-tabs&gt;

</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-2&quot;&gt;
        &lt;ul class=&quot;nav flex-column  nav-pills&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f&quot; role=&quot;tablist&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_0-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_0&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_1-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_1&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_1&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_2-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_2&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_2&quot; aria-selected=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-10&quot;&gt;
        &lt;div class=&quot;tab-content&quot; id=&quot;2f347a2276af424ebbd67f85653edf1fContent&quot;&gt;
            &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_0-tab&quot;&gt;
                 Content_Home
            &lt;/div&gt;
            &lt;div class=&quot;tab-pane fade&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_1&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_1-tab&quot;&gt;
                 Content_Profile
            &lt;/div&gt;
            &lt;div class=&quot;tab-pane fade&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_2-tab&quot;&gt;
                 Content_Contact
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>

    <div class="attribute-area">
        <ul>
            <li>
                <b>vertical-header-size</b>: Sets the column width of tab headers.
            </li>
        </ul>
    </div>
</div>